<template>
	<div class="box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, reactive, shallowRef, onMounted, onUnmounted, watchEffect,defineEmits } from "vue";
import { pxToRem } from "@/utils/index";

// 接收参数
const props = defineProps({
	housingSupplyStatsData: {
			type: Object,
			default: () => {},
	},
});
// 数据定义
const chartsData = reactive<any>({
	legendData: [],
	xAxisData: [],
	yAxisData: [],
	seriesData: [],
});
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
	const emit = defineEmits(['dialogData'])
// echarts初始化渲染
chartsData.legendData = props.housingSupplyStatsData.legendData;
chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
chartsData.seriesData = props.housingSupplyStatsData.seriesData;
const colors = props.housingSupplyStatsData.colors;
const typeData = props.housingSupplyStatsData.typeData;
const legendSty = props.housingSupplyStatsData.legendStyle;
const gridSty = props.housingSupplyStatsData.gridConfig;

const getEchart = () => {
	if (echartDom.value) {
			myChart.value = echarts.init(echartDom.value);
			// 提示框文字样式
			const tooltipTextStyle = {
					color: "#fff",
					fontSize: pxToRem(14),
			};

			// 提示框背景
			const tooltipBackgroundColor = "rgba(47, 99, 205, 0.5)";

			// 图例配置
			const legendStyle = {
					show: legendSty.show,
					icon: legendSty.icon,
					left: legendSty.right ? "auto" : legendSty.left=='center'?'center': pxToRem(legendSty.left),
					right: pxToRem(legendSty.right),
					top: pxToRem(legendSty.top),
					itemWidth: pxToRem(legendSty.itemWidth),
					itemHeight: pxToRem(legendSty.itemHeight),
					itemGap: pxToRem(legendSty.itemGap),
					textStyle: {
							color: "#fff",
							fontSize: pxToRem(10),
							rich: {},
							padding: [0, 0, pxToRem(-3), 0],
					},
					data: chartsData.legendData,
					width: pxToRem(250)
			};

			// 网格区域
			const gridConfig = {
					left: gridSty.left,
					right: gridSty.right,
					bottom: gridSty.bottom, 
					top: gridSty.top,
					containLabel: true,
			};

			// x轴配置
			const xAxisConfig = {
					boundaryGap: true,
					data: chartsData.xAxisData,
					axisLine: {
            show: false // 隐藏X轴线
      },
					axisTick: {
							show: false,
					},
					axisLabel: {
							textStyle: {
									color: "#FFFFFF",
									fontSize: pxToRem(12),
							},
					},
			};

			// y轴配置
			const yAxisConfig = chartsData.yAxisData.map((item: any) => ({
					type: "value",
					name: item.name,
					nameTextStyle: {
							color: "white",
							fontSize: pxToRem(12),
							padding:[0,0,0,pxToRem(-30)]
					},
					splitLine: {
							show: false,
							lineStyle: {
									color: "white",
									type: "dashed",
							},
					},
					axisLabel: {
							formatter: "{value}",
							color: "white",
							fontSize: pxToRem(12),
					},
					
			}));
			const underConstruction:Array<any> = [];
			const notStarted:Array<any> = [];
			const planned:Array<any> = [];
			chartsData.seriesData.forEach((item: { value: any[]; }) => {
				item.value.forEach((subItem: { name: string; value1: any; }) => {
					if (subItem.name === '在建') {
						underConstruction.push(subItem.value1);
					} else if (subItem.name === '未开工') {
						notStarted.push(subItem.value1);
					} else if (subItem.name === '规划') {
						planned.push(subItem.value1);

					}
				});
			});
			let allData = [underConstruction,notStarted,planned]
			// 数据项配置
			const seriesConfig = chartsData.legendData.map((data: any, index: string | number) => ({
					name: chartsData.legendData[index],
					type: 'bar',
					barWidth: chartsData.xAxisData.length > 5 ?'50%':'5%', // 设置为类目宽度的50%
					data:  chartsData.seriesData[index].value,
					symbol: "none",
					smooth: true,
					stack: 'one',
					yAxisIndex: 0,
					areaStyle:null,
					itemStyle: {
							color: {
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									type: "linear",
									global: false,
									colorStops: [
											{
													offset: 0,
													color: colors[index].a,
											},
											{
													offset: 1,
													color: colors[index].b,
											},
									],
							},
					},
			}));
			// 渲染图表数据
			const option = {
				tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "line",
        },
        position: function (point: any[], params: any, dom: any, rect: any, size: any) {
            return [point[1], '10%']; // 示例：将 tooltip 定位在鼠标的水平位置和视窗顶部 10% 的位置
        },
        textStyle: tooltipTextStyle,
        backgroundColor: tooltipBackgroundColor,
								borderColor: '#66FFFF', // 设置边框颜色为红色
        borderWidth: 1, // 设置边框宽度
      },
					legend: legendStyle,
					grid: gridConfig,
					xAxis: xAxisConfig,
					yAxis: yAxisConfig,
					series: seriesConfig,

			};
			// console.log('option',option)
			myChart.value.setOption(option);
			myChart.value.getZr().on("click", (params) => {
      emit('dialogData',option)
    });
	}
};
const updateChart = () => {
	if (myChart.value) {
			myChart.value.dispose(); // 销毁旧图表实例
	}
	chartsData.legendData = props.housingSupplyStatsData.legendData;
	chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
	chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
	chartsData.seriesData = props.housingSupplyStatsData.seriesData;
	getEchart();
};

const tempDom = (params) => {
  let tempDom = ''
  let tb = params.data.value1 >= 0 ? 'up' : 'down'
  if(tb == 'up'){
     tempDom = `<span class="triangle"></span><span class="greenFont">${params.data.value1}%</span>同比上年`
  }else{
    tempDom = `<span class="triangleRed"></span><span class="redFont">${params.data.value1}%</span>同比上年`
  }
  
   return tempDom
}

watchEffect(() => {
	updateChart();
});

onMounted(() => {
	getEchart();
	window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
	window.removeEventListener("resize", updateChart);
});
</script>
